<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="UTF-8">
    <title>Graduation-project by THISISAGOODNAME</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

    <link rel="stylesheet" href="reveal.js/css/reveal.css">
    <link rel="stylesheet" href="reveal.js/css/theme/solarized.css" id="theme">

    <!-- For syntax highlighting -->
    <link rel="stylesheet" href="reveal.js/lib/css/zenburn.css">

    <style>
        h2 b {
            color : #048;
        }

        h3 b {
            color : #369;
        }

        b {
            color : #63a;
        }

        strong {
            color : #c11;
        }

        #wrap {
            width : 600px;
            margin : 0 auto;
        }

        #left_col {
            float : left;
            width : 300px;
        }

        #right_col {
            float : right;
            width : 300px;
        }

        .reveal section img {
            border: none;
        }
    </style>
    
</head>
<body>

<div class="reveal">
    <div class="slides">

        <!--封面-->
        <section data-markdown>
            <script type="text/template">
                ## <b>web移植工具</b><b style="color: #f00">Emscripten</b><br><b>的研究与应用</b>

                <br>
                姓名: <b>杨彦君</b>

                学号: <b>12061040</b>

                指导教师: <b>吴壮志</b>
            </script>
        </section>

        <!--研究的目的和意义-->
        <section>
            <section data-markdown>
                <script type="text/template">
                    ## <b>Part I</b> <b>:</b> 研究的目的和意义
                </script>
            </section>

            <section data-markdown>
                <script type="text/template">
                    ### <b>1、</b>研究的背景

                    面对人们日益加剧的信息分享和获取的需求，硬件方面智能终端设备也在不断的推陈出新，而同样的，
                    在软件方面，移动互联网也逐渐渗透到各行各业当中，产生了
                    “<b>互联网</b><b style="color: #f00">+</b>”和
                    “<b>工业</b><b style="color: #f00">4.0</b>”的概念。
                    全世界进入了移动互联网的时代。而在移动互联网时代，大量基于C/S的传统软件变为了遗留系统。
                    这些遗留系统在向web环境进行移植过程中，需要花费巨大的人力和物力，如何有效的进行软件移植工作，
                    一直存在普遍的问题。
                </script>
            </section>

            <section data-markdown>
                <script type="text/template">
                    ### <b>2、</b> 研究的意义

                    从90年代开始,客户机/服务器(Client/Server,以下简称为C/S)结构代替了原来的
                    主机/终端(Host/Terminal)结构,并且在整个IT发展中发挥了巨大的作用。
                    但随着Interne t的不断普及和应用的迅速升级,C/S的应用感到有些力不从心。
                    而Web平台是一个调度任务集中的、以客户为中心的应用程序平台;
                    它是一个分布式、开放、适用性强、高性能、端到端的平台;它使企业利用技术获取竞争优势。
                    但是，很多企业可能并没有那么多人力物力来重新进行web版的编写，如果能有一种技术，
                    既能使用传统软件的源代码，直接生成web版的应用，或者能生成关键模块，简化web应用的开发过程，
                    对于企业的发展极为有用。
                </script>
            </section>

            <section data-markdown>
                <script type="text/template">
                    ### <b>3、</b> 研究的目的

                    为传统软件或程序类库移植到web上寻求一个切实可行的方案。
                </script>
            </section>
        </section>

        <!--进度安排-->
        <section data-markdown>
            <script type="text/template">
                ## <b>表格</b> <b>:</b> 进度计划安排


                | 时间 | 研究计划 |
                |:--------:|:--------|
                |2015-12 ~ 2016-01|选题，准备开题答辩，调研相关技术|
                |2016-01 ~ 2016-03|make工具使用的学习，学会编写makefile,学习web IDL语言以及使用|
                |2016-03 ~ 2016-04|自行编写一个十个文件左右的项目并尝试移植，中期答辩|
                |2016-05 | 完成Meshlab，bullet，luaVM，SQLite的移植，并测试|
                |2016-06 | 完成毕业设计和毕业论文，进行最终答辩|

            </script>
        </section>

        <!--原计划目标-->
        <section data-markdown>
            <script type="text/template">
                ### <b>计划目标</b>

                1. Meshlab : 开源网格处理软件；
                2. Bullet Physics Engine : 开源物理引擎；
                3. luaVM : lua语言的虚拟机(运行环境)；
                4. SQLite : 开源数据库。
            </script>
        </section>

        <!--黑箱程序-->
        <section data-markdown>
            <script type="text/template">
                ## <b>Part I</b> <b>:</b> 移植"黑箱程序"(以一些独立小demo和lua VM为例)
            </script>
        </section>

        <!--1.1 黑箱程序含义-->
        <section data-markdown>
            <script type="text/template">
                ### <b>1、</b>何为<b>"黑箱程序"</b>

                "黑箱程序"是我个人创造的一个词汇,我个人根据emscripten编译器的特点,将移植的软件分成了两个类型

                - 功能独立,所有函数都是程序内部私有函数.在外部使用时,只关心程序运行结果,不需要内部方法
                - 框架/类库型程序,作用是提供接口供外部调用

            </script>
        </section>

        <!--1.2 Hello world-->
        <section data-markdown>
            <script type="text/template">
                ### <b>2、</b>一个<b>Hello world</b>程序

                以常见的程序hello world开始

                ```
                #include <stdio.h>
                int main()
                {
                    printf("hello world\n");
                    return 0;
                }
                ```

                具体效果见展示
            </script>
        </section>

        <!--1.3 其他单文件demo展示-->
        <section data-markdown>
            <script type="text/template">
                ### <b>3、</b><b>sdl,gles,glfw</b>示例

                emscripten支持一个功能,就是将openGL ES 2.0的程序直接转变为webgl
                这个过程中,游戏开发常用的sdl,gles,glfw都是可用的,注意回避掉openGL 2.0与openGL ES 2.0中不兼容
                的部分,最大的不同就是渲染管线(openGL ES 2.0不支持固定管线)

            </script>
        </section>

        <!--1.4 lua VM移植-->
        <section>
            <section data-markdown>
                <script type="text/template">
                    ### <b>4、</b><b>lua VM</b>移植过程

                    lua是一个轻量级的脚本语言.其设计目的是为了嵌入应用程序中，从而为应用程序提供灵活的扩展和定制功能。
                    Lua由标准C编写而成，几乎在所有操作系统和平台上都可以编译，运行。大量游戏开发者都选用lua作为嵌入式
                    脚本的首选. lua VM也是一个典型黑箱程序,只对外提供一个exec功能用来执行代码,并给出结果.

                </script>
            </section>

            <section data-markdown>
                <script type="text/template">
                    ### <b>lua VM</b>移植过程

                    对于"黑箱程序",直接用emscripten替换gcc作为编译器,在绝大部分情况下成立

                </script>
            </section>

            <section data-markdown>
                <script type="text/template">
                    ### lua <b>REPL</b>

                    REPL意为:交互式解释器,也就是说依靠编译后的luaVM,可以实现一个纯前端(不需要后端server)的lua解释器,
                    并且不需要其他任何插件

                    可以看我给出的lua REPL demo

                </script>
            </section>
        </section>

        <!--类库/框架型程序-->
        <!--黑箱程序-->
        <section data-markdown>
            <script type="text/template">
                ## <b>Part II</b> <b>:</b> 移植"类库程序"(以一个小demo和bullet引擎为例)
            </script>
        </section>

        <!--2.1 类库/框架型程序-->
        <section data-markdown>
            <script type="text/template">
                ### <b>1、</b>何为<b>"白箱程序"</b>

                和"黑箱程序"正好相反,很多时候,我们要使用类库和框架提供的内部函数和方法来实现很多功能
                C/C++是一门强类型语言,JavaScript是一门动态语言,两者之间有很多差异,为了在JavaScript中
                对于C/C++进行调用,需要手动将需要暴露出的方法(包括类实例化方法)和属性写出来告知编译器

            </script>
        </section>

        <!--2.2 webIDL-->
        <section>
            <section data-markdown>
                <script type="text/template">
                    ### <b>2、</b><b>webIDL</b>标准

                    Web IDL（Interface Definition Language，接口定义语言）该规范定义了一个OMG IDL 3.0的语法子集，
                    用来规范定义的接口。Web IDL 是一个具有多种功能的IDL 变量，便于规范Web平台中的常用脚本对象的操作。
                    其中包括了大量的扩展功能，以及捆绑了针对ECMAScript 3rd Edition 和Java的语言工具。

                </script>
            </section>

            <section data-markdown>
                <script type="text/template">
                    ### <b>2、</b><b>webIDL</b>标准(续)

                    简单说,WebIDL就是为即将暴露出的类(暴露实例化方法),方法和属性写的配置文件,用来告诉编译器
                    在编译后允许调用那些方法,一些WebIDL的具体写法我总结在了[这里](http://aicdg.com/emscripten/2016/02/20/webidl-binder.html)

                </script>
            </section>
        </section>

        <!--2.3 一个webIDL binder-->
        <section data-markdown>
            <script type="text/template">
                ### <b>3、</b>webIDL的一个实例

                请看实例展示

            </script>
        </section>


        <!--2.4 bullet引擎-->
        <section data-markdown>
            <script type="text/template">
                ### <b>4、</b><b>bullet physics</b>实例

                知道webIDL的原理,其实就足够进行bullet的移植了,要描述bullet引擎的所有方法,
                虽然很累,是个力气活,但是熟知webIDL之后难度并不大

                具体效果可以看现场展示
            </script>
        </section>



        <!--接下来的任务-->
        <section data-markdown>
            <script type="text/template">
                ## <b>Part IV</b> <b>:</b> 接下来的任务

                - 完成box2d.js的IDL文件编写
                - 视图完成meshlab.js的移植工作(思考有GUI程序移植的方案)

            </script>
        </section>

        <section>
            <h2><b style="color: #f00">谢谢大家</b></h2>
            <br>
            <br>
            <p class="fragment">欢迎提问</p>
        </section>
    </div>
</div>


<script src="reveal.js/lib/js/head.min.js"></script>
<script src="reveal.js/js/reveal.js"></script>

<script>
    // Full list of configuration options available at:
    // https://github.com/hakimel/reveal.js#configuration
    Reveal.initialize({
        controls: true,
        progress: true,
        history: true,
        center: true,

        theme: 'sky',
        transition: 'slide', // none/fade/slide/convex/concave/zoom

        // Optional reveal.js plugins
        dependencies: [
            {
                src: 'lib/js/classList.js', condition: function () {
                return !document.body.classList;
            }
            },
            {
                src: 'plugin/markdown/marked.js', condition: function () {
                return !!document.querySelector('[data-markdown]');
            }
            },
            {
                src: 'plugin/markdown/markdown.js', condition: function () {
                return !!document.querySelector('[data-markdown]');
            }
            },
            {
                src: 'plugin/highlight/highlight.js', async: true, callback: function () {
                hljs.initHighlightingOnLoad();
            }
            },
            {src: 'plugin/zoom-js/zoom.js', async: true},
            {src: 'plugin/notes/notes.js', async: true}
        ]
    });
</script>

</body>
</html>
